<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01_箭头函数</title>
</head>

<body>
    <button id="btn">按钮</button>
    <script>
        let btn = document.getElementById('btn')
        btn.addEventListener('click',function(){
            // let _this=this

            // //this 指向事件源button DOM标签本身
            // //console.log(this);
            // setTimeout(function(){
            //     //_this指向事件本身
            //     console.log(_this);
            //     //this 指向window
            //     console.log(this);
            //     //不能打印innerText 访问一个对象不存在的属性结果是undefined
            //     console.log(this.innerText);
            // },1000)
           setTimeout(()=>{
               console.log(this);
               console.log(this.innerText);
           },1000)

        })
        //   箭头函数
        //1. 简写
        //  1)当参数只有一个的时候,可以省略小括号
        //  2)当函数体只有一句代码可以省略大括号,此时箭头函数自带return

        //2. 特性
        //  1) 箭头函数内部的this指向上一层函数的this指向,
          //    也就是说箭头函数自身没有this指向的问题,内部this向上看

          // 3. 箭头函数什么时候用
          //    1)回调函数中大量用
         //     2) 改变this指向时候
        let fn1 = function (str) {
            console.log(str);
        }

        let fn2 = (str) => {
            console.log(str);
        }

        let fn3 = str => {
            console.log(str);
        }
        fn3('hello')

       
        let add = (x,y)=> x+y
        console.log(add(20,3));
    </script>
</body>

</html>